<template>
    <div id="login">
        <div id="title">
            <span>小学入学服务系统</span>
        </div>
        <div id="caozuo">
            <span>系统操作说明:</span>
            <p>1.注册账号:注册时,需如实填写本人相关的信息,当注册成功后,注册所用部分信息将被自动填入信息采集表,且不可更改。</p>
            <p>2.忘记密码:修改密码时,请输入注册时输入的安全码,当安全码正确后,可修改密码。</p>
        </div>
        <div id="container">
            <div id="ctitle">
                <span>登陆系统</span>
            </div>
            <div id="main">
                <div id="clogin">
                    <p><span id="loginspan">身份证号:</span><input placeholder="请输入身份证号" type="text" v-model="ucid"><span class="ps1" :class="{psy:namepdy,psn:namepdn}"></span></p>
                    <p><span id="loginspan">密码:</span><input placeholder="请输入密码" type="password" v-model="upwd"></p>
                    <p style="margin:0"><span id="loginspan">验证码:</span><input placeholder="请输入验证码" id="yzminput" style="width:40%;border;
" type="text" maxlength="4" v-model="uyzm"><span id='yzm' @click="yzmgb($event)"></span><span class='ps1' :class="{psy:yzmy,psn:yzmn}"></span></p>
                    <div><p style="margin-bottom:5vw;text-align:right;width:80%;color:grey;font-size:3.5vw"><span>点击更换验证码</span></p></div>
                    <button id='loginin' @click="loginin">登录</button>
                    <van-popup v-model="dlsb" id='tishi'>
                    <div>
                        <p>身份证号或密码输入错误</p>
                        <button @click="close('gb1')">确定</button>
                    </div>
                    </van-popup>
                    <van-popup v-model="dlcg" id='tishi'>
                        <div>
                            <p>登陆成功</p>
                            <button @click="close('gb2')">确定</button>
                        </div>
                    </van-popup>
                    <van-popup v-model="yzmbd" id='tishi'>
                        <div>
                            <p>验证码输入错误,请重新输入</p>
                            <button @click="close('gb3')">确定</button>
                        </div>
                    </van-popup>
                    <van-popup v-model="zjhwsr" id='tishi'>
                        <div>
                            <p>请输入证件号</p>
                            <button @click="close('gb4')">确定</button>
                        </div>
                    </van-popup>
                    <van-popup v-model="mmwsr" id='tishi'>
                        <div>
                            <p>请输入密码</p>
                            <button @click="close('gb5')">确定</button>
                        </div>
                    </van-popup>
                    <van-popup v-model="zjhgsbd" id='tishi'>
                        <div>
                            <p>证件号格式有误,请重新输入</p>
                            <button @click="close('gb6')">确定</button>
                        </div>
                    </van-popup>
                    </div>
                    <div id="nav">
                        <router-link to=''>登录</router-link>丨
                        <router-link to='/forget'>忘记密码</router-link>丨
                        <router-link to='/reg'>注册</router-link>
                    </div>
                    
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            namepdy:false,
            namepdn:false,
            yzmy:false,
            yzmn:false,
            yzmpd:false,
            yzm:'',
            ucid:'',
            uyzm:'',
            upwd:'',
            uyzmpd:false,
            dlsb:false,
            dlcg:false,
            yzmbd:false,
            zjhwsr:false,
            mmwsr:false,
            zjhgsbd:false
        }
    },
    methods:{
        yzmgb(e){
            var a=String(Math.floor(Math.random()*10)); 
            var b=String(Math.floor(Math.random()*10)); 
            var c=String(Math.floor(Math.random()*10));     
            var d=String(Math.floor(Math.random()*10)); 
            var yyzm=a+b+c+d;
            for(var i=true;i;){
                if(yyzm !=this.yzm){
                    this.yzm=yyzm;
                    e.srcElement.innerHTML=this.yzm;
                    if(this.yzmy==true){
                        this.yzmn=true;
                        this.yzmy=false;
                    }
                    break;
                }
            };
        },
        loginin(){
            if(this.ucid==''){
                this.zjhwsr=true;
            }else if(this.namepdn==true){
                this.zjhgsbd=true;
            }else if(this.upwd==''){
                this.mmwsr=true;
            }else if(this.uyzmpd==false){
                this.yzmbd=true;
            }else{
                this.axios.get(`/userlogin?ucid=${this.ucid}&upwd=${this.upwd}`).then((result)=>{
                    // console.log(result)
                    console.log(result.data.code);
                    if(result.data.code==400){
                        this.dlsb=true;
                    }else if(result.data.code=200){
                        this.dlcg=true;
                        window.sessionStorage.setItem('islogin',result.data.results[0].uid);
                    }
                });
            }
            
        },
        close(a){
            if(a=='gb1'){
                this.dlsb=false;
            }else if(a=='gb2'){
                this.dlcg=false;
                this.$router.push('/message');
            }else if(a=='gb3'){
                this.yzmbd=false;
            }else if(a=='gb4'){
                this.zjhwsr=false;
            }else if(a=='gb5'){
                this.mmwsr=false;
            }else if(a=='gb6'){
                this.zjhgsbd=false;
            }
        }
    },
    mounted(){
        var yzm=document.getElementById('yzm');
        var a=String(Math.floor(Math.random()*10)); 
        var b=String(Math.floor(Math.random()*10)); 
        var c=String(Math.floor(Math.random()*10)); 
        var d=String(Math.floor(Math.random()*10)); 
        this.yzm+=a+b+c+d;
        yzm.innerHTML=this.yzm
        var islogin=window.sessionStorage.getItem('islogin');
        // console.log(!islogin)
        if(islogin && islogin!='false'){
            this.$router.push('/message')
        }
    },
    watch:{
        ucid(nawval){
            var rst=/^[1-9]\d{5}(201(5|4)){1}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/i;
            var res=rst.test(nawval);
            // console.log(res)
            if(res ==false){
                this.namepdn=true;
                this.namepdy=false;
            }else{
                this.namepdy=true;
                this.namepdn=false
            }
        },
        uyzm(nawval){
            // console.log(yzm)
            if(nawval==this.yzm){
                this.yzmy=true;
                this.yzmn=false
                this.uyzmpd=true;
            }else{
                this.yzmn=true;
                this.yzmy=false;
            }
        },
        dlcg(nawval){
            if(nawval==false){
                this.$router.push('/message');
            }
        },
    }
}
</script>
<style scoped>
*{
    margin: 0;
    padding:0;
}
#login{
    width:90%;
    margin-left: 5%;
}
#title{
    color: #bc272e;
    font-size: 9vw;
    text-align: center;
    padding: 10vw 0;
    border-bottom: 0.1vw solid grey;
}
#caozuo{
    padding: 5vw 0;
}
#caozuo>span{
    /* margin: 5vw 0; */
    font-size: 5vw;
    color: #bc272e;
}
#caozuo>p{
    margin-top: 5vw;
    font-size: 4vw;
    line-height: 7vw;
}
#ctitle{
    font-size: 7vw;
    margin-bottom: 5vw;
}
#ctitle>span{
    border-bottom:1vw solid orange;
    padding-bottom: 2vw;
}
#clogin>p,#creg>p{
    text-align: right;
    margin-bottom: 5vw;
    display: flex;
}
#loginspan{
    display: inline-block;
    width: 20%;
}
#clogin>p>input,#creg>p>input{
    height: 6vw;
    width: 60%;
    border: 0.1vw solid grey;
    border-radius: 2vw;
    border: 0.1vw solid black;
}
.ps1{
    display: inline-block;
    height: 5vw;
    width: 10%;
    background-repeat: no-repeat;
    background-position:center center;
}
.psy{
    background-image: url('../assets/yes.png');
}
.psn{
    background-image: url('../assets/no.png');
}
#yzm{
    display: inline-block;
    width: 17%;
    height: 7vw;
    border: 0.1vw solid black;
    margin:0 2vw;
    text-align: center;
    font-size: 6vw;
}
#loginin{
    height: 12vw;
    width: 100%;
    border:none;
    border-radius: 5vw;
    background-color: #bc272e;
    color: white;
    margin-bottom: 5vw;
    font-size: 6vw
}
#nav{
    display: flex;
    justify-content: center;
}
#nav>a:first-child{
    color: grey;
}
#nav>a{
    color: red;
}
#tishi{
    width: 90%;
    height: 20%;
    text-align: center;
    border-radius: 5vw;
}
#tishi>div{
    height: 100%;
}
#tishi>div>p{
    margin-left: 10%;
    width: 80%;
    line-height: 400%;
    font-size: 5vw;
    border-bottom: 0.1vw solid grey;
}
#tishi>div>button{
    width: 80%;
    height: 35%;
    border: none;
    background-color: white;
}
</style>